<!-- 分类下拉选择 -->
<template>
  <el-select
    v-model="formData[prop]"
    :placeholder="placeholder"
    clearable
    filterable
    class="mr_10"
    @change="selectChange"
  >
    <el-option label="全部" value="" />
    <el-option
      v-for="op in options"
      :key="op.id"
      :label="op.name"
      :value="op.id"
    />
  </el-select>
</template>

<script>
import { supplierCate } from '@/api/common'
export default {
  name: 'ClassifySelect',
  props: {
    formData: {
      type: Object,
      required: true
    },
    prop: {
      type: [Array, String],
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    classifyId: {
      type: [String, Number],
      default: ''
    },
    classifyType: {
      type: String,
      default: '0'
    },
    typeId: {
      type: [String, Number],
      default: ''
    },
    typeNum: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      options: []
    }
  },
  watch: {
    classifyId: {
      handler(newValue, oldValue) {
        this.getList()
      },
      deep: true
    },
    typeId: {
      handler(newValue, oldValue) {
        this.getList()
      },
      deep: true
    }
  },
  created() {
    if (this.classifyType !== '1') {
      this.getList()
    }
  },
  methods: {
    getList() {
      if ((this.typeNum === '2' && !this.classifyId) || (this.classifyType === '1' && !this.typeId)) return
      supplierCate({ pid: this.classifyId, type: this.classifyType, type_id: this.typeId }).then(res => {
        const { data } = res
        this.options = data.list
      })
    },
    selectChange(val) {
      this.$emit('event-change', val)
    }
  }
}
</script>
